<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>百度一下，你就知道</title>
        <link rel="shortcut icon" href="https://baidu.com/favicon.ico">
        <style>
            html {-webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);}
            body{
                margin: 0;
                padding: 0;
            }
            .wrapper{
                width: 100%;
                height: 780px;
                position: relative;
            }
            .header{
                width: 100%;
                height: 32px;
                position: relative;
            }
            .header-right{
                float: right;
                width: 650px;
                height: 32px;
                line-height: 32px;
            }
            .set{
                float: right;
                font-size: 13px;
                color: #555555;
            }
            .more-fa{
                width: 86px;
                height: 32px;
                margin-left: 19px;
                float: right;
            }
            .more{
                display: block;
                width: 86px;
                height: 32px;
                text-align: center;
                font-size: 13px;
                background-color: #828282;
                color: #ffffff;
                cursor: default;
            }
            .set-fa{
                position: relative;
                float: right;
                width: 26px;
                height: 32px;
            }
            .arrow{
                width: 0;
                height: 0;
                border-top: 5px solid transparent;
                border-left: 6px solid transparent;
                border-right: 6px solid transparent;
                border-bottom: 5px solid #e9e9e9;
                position: absolute;
                top: 22px;
                left: 9px;
            }
            .arrow-s{
                width: 0;
                height: 0;
                border-top: 5px solid transparent;
                border-left: 6px solid transparent;
                border-right: 6px solid transparent;
                border-bottom: 5px solid #ffffff;
                position: absolute;
                top: 23px;
                left: 9px;
            }
            .set-more{
                display:none ;
            }
            .set-fa:hover .set-more{
                display: block;
            }
            .sets{
                border: 1px solid #e9e9e9;
                width: 70px;
                height: 112px;
                position: absolute;
                left: -21px;
                top: 32px;
                text-align: center;
                line-height: 28px;
            }
            .sets a{
                line-height:28px ;
                display: block;
                width: 70px;
                height: 28px;
                text-decoration: none;
                color: #555555;
                font-size: 12px;
            }
            .set-text span{
                font-size: 13px;
            }
            .ste-active:hover{
                background-color: #1e76fd;
                color: #ffffff;
            }
            .more-info{
                position: absolute;
                display: none;
                border-left: 1px solid #e9e9e9;
                border-bottom: 1px solid #e9e9e9;
                background-color: #f9f9f9;
                width: 85px;
                min-height: 600px;
                right: 0;
                top: 0;
            }
            .info-more{
                text-align: center;
                margin: 0 auto;
                color: #000000;
                width: 66px;
                height: 30px;
                line-height: 34px;
                font-size: 13px;
                border-bottom: #f0f0f0 1px solid;
            }
            .bd-marketing{
                display: block;
                text-align: center;
                width: 66px;
                height: 76px;
                margin: 0 auto;
                font-size: 12px;
                border-bottom: #f0f0f0 1px solid;
                color: #666;
                text-decoration: none;
                overflow: hidden;
                text-shadow: none;
                line-height: 14px;
            }
            .bd-img{
                display: block;
                height: 36px;
                width: auto;
                margin: 10px auto 5px;
                cursor: pointer;
            }
            .more-fa:hover .more-info{
                display: block;
            }
            .hero{
                width: 500px;
                height: 600px;
                margin: 0 auto;
                text-align: center;
            }
            .hero img{
                width: 300px;
                height: auto;
            }
            .hero span{
                font-size: 30px;
                font-weight: bold;
            }


        </style>
    </head>
    <body>

        <div class="wrapper">
            <div class="header">
                <div class="header-right">

                    <div class="more-fa">
                        <a class="more">更多产品</a>

                        <div class="more-info">
                            <div class="info-more">更多产品</div>
                            <div class="bd">
                                <a class="bd-marketing" target="_blank" href="http://e.baidu.com?refer=889">
                                    <img class="bd-img" src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/yingxiao_72-b585c1ec7d.png">
                                    百度营销
                                </a>
                                <a class="bd-marketing" target="_blank" href="http://e.baidu.com?refer=889">
                                    <img class="bd-img" src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/yingxiao_72-b585c1ec7d.png">
                                    百度营销
                                </a>
                                <a class="bd-marketing" target="_blank" href="http://e.baidu.com?refer=889">
                                    <img class="bd-img" src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/yingxiao_72-b585c1ec7d.png">
                                    百度营销
                                </a>
                                <a class="bd-marketing" target="_blank" href="http://e.baidu.com?refer=889">
                                    <img class="bd-img" src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/yingxiao_72-b585c1ec7d.png">
                                    百度营销
                                </a>
                                <a class="bd-marketing" target="_blank" href="http://e.baidu.com?refer=889">
                                    <img class="bd-img" src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/yingxiao_72-b585c1ec7d.png">
                                    百度营销
                                </a>
                                <a class="bd-marketing" target="_blank" href="http://e.baidu.com?refer=889">
                                    <img class="bd-img" src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/yingxiao_72-b585c1ec7d.png">
                                    百度营销
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="set-fa">
                        <a href="" class="set">设置</a>
                        <div class="set-more">
                            <div class="arrow"></div>
                            <div class="arrow-s"></div>
                            <div class="sets">
                                    <a class="ste-active" href="//www.baidu.com/gaoji/preferences.html" target="_blank">搜索设置</a>
                                    <a class="ste-active">高级搜索</a>
                                    <a class="ste-active">关闭预测</a>
                                    <a class="ste-active">隐私设置</a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="hero">
                <span>致敬英雄，中国加油！</span>
                <img src="0404.JPG" alt="致敬英雄中国加油">
            </div>
        </div>
        
    </body>
</html>